<template>
	<van-tabbar class="tabbar" ref="seat3" v-model="active" active-color="#EE5A55" inactive-color="#979797">
		<van-tabbar-item class="tabbar-item text" :badge="approvalNub" to="/user/approval">
			我的审批
		</van-tabbar-item>
		<van-tabbar-item class="tabbar-item icons" icon="add" to="/home">
		</van-tabbar-item>
		<van-tabbar-item class="tabbar-item text" :badge="applyNub" to="/applyuser/apply">
			我的申请
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				approvalNum: '',
				applyNum: '',
				active: 0
			}
		},
		watch: {
			'$route'(to, from) {
				if (to.path == "/home") {
					this.active = 1;
				} else if (to.path === "/user/approval" || to.path === "/user/waitApproval") {
					this.active = 0;
				} else if (to.path === "/applyuser/apply" || to.path === "/applyuser/complete") {
					this.active = 2;
				}
			}
		},
		created() {
			if (this.$route.name === "waitapproval" || this.$route.name === "approval") {
				this.active = 0;
			} else if (this.$route.name === "home") {
				this.active = 1;
			} else if (this.$route.name === "apply" || this.$route.name === "complete") {
				this.active = 2;
			}
		},
		mounted(){
			this.$store.commit('setDomHeight3', this.$refs.seat3.$el.offsetHeight)
		},
		computed: {
			approvalNub() {
				this.approvalNum = this.$store.state.total
				return this.approvalNum == 0 ? '' : this.approvalNum
			},
			applyNub() {
				this.applyNum = this.$store.state.total2
				return this.applyNum == 0 ? '' : this.applyNum
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		height: 6.4%;
		padding-bottom: vw(16);
		background-color: #fafaf9;

		/deep/ .van-tabbar-item--active {
			background-color: #fafaf9;
		}
	}

	.tabbar-item {
		font-size: vw(17);
		font-weight: 550;

		/deep/ .van-info {
			top: vw(-2);
			right: vw(-43);
			font-size: vw(12);
			padding: vw(0) !important;
			line-height: vw(19) !important;
			width: vw(20);
			height: vw(20);
			border-radius: 50% !important;
		}
	}

	.icons {
		/deep/ .van-tabbar-item__icon {
			font-size: vw(35);
			margin-bottom: 0 !important;
		}

		flex: 0;
	}

	.text {
		flex: 1;
	}
</style>
